<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Class-组件</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: grey;
    font-family: '华文行楷';
  }

  h1 {
    margin-bottom: 5px;
  }
</style>
<body>
<div id="container"></div>

<!--引入react核心库-->
<script src="../../js-依赖包/react.development.js"></script>
<!--引入react.dom 用于支出react操作DOM-->
<script src="../../js-依赖包/react-dom.development.js"></script>
<!--引入babel  用于将jsx转换为js-->
<script src="../../js-依赖包/babel.min.js"></script>

<script type="text/babel"> //这里一定要将类型写为babel

// 1. 创建Class组件
class Person{ //  创建Person类
  //  构造器方法
  constructor(name,age,sex) {
    this.name=name;
    this.age=age;
    this.sex=sex
  }
  //类中可以直接写赋值语句, 如下代码含义是：给Person实例化对象添加一个属性
  isSchool=true
  // 一般方法
  speak(){
    if (this.age<=18){
      this.isSchool=false
    }
    console.log(`我叫${this.name},性别${this.sex},今年${this.age}岁,${this.isSchool ? '还在上学':'没上学了'}！！`)
  }
}
// 实例化对象
let person1=new Person('张三','15','男')
let person2=new Person('李四','25','女')
person1.speak()
person2.speak()

// 创建一个Students类    继承Person类
class Students extends Person{
  constructor(name,age,sex,place) {
    super(name,age,sex); // 继承父类的属性并传参
    this.place=place // 写子类独有的属性
  }
  // 重写方法
  speak() {
    if (this.age<=18){
      this.isSchool=false
    }
    console.log(`继承父类--我叫${this.name},${this.place}人,性别${this.sex},今年${this.age}岁,${this.isSchool ? '还在上学':'没上学了'}！！`)
  }
}
let student1=new Students('王五','8','男','南充')
let student2=new Students('赵六','44','女','成都')
student1.speak()
student2.speak()
// 2. 渲染组件到页面
// ReactDOM.render(<person1/>,document.getElementById('container'))

</script>
</body>
</html>